<template>
  <div  class="page-layout">
    <h1>DvChartBar</h1>
    <p>柱状图表</p>

    <h2>DvChartBar Settings</h2>
    <pre> 
      下面为 DvChartBar 的 settings 配置： 
      {
        // 排列方向，即类别在哪个轴上
        direction: {
          type: String,
          default: 'x',
          validator(val) {
            return ['x', 'y'].includes(val)
          }
        },
        // 数据项的标签设置，字符类型设置position， 对象与原生series.label设置一致
        label: [String, Object, Array],
        
        // 值类型轴配置
        valueAxis: [String, Object, Array],
        
        // 堆叠柱，如 ['name1', 'name2']  或  {'name': ['name1', 'name2']}
        stack: [Object, Array],
        
        // 改成线条显示的系列
        lines: [String, Array],
        
        // 线条平滑，只对折线图有效
        smooth: {
          type: [Boolean, Number],
          default: 0.5
        },

        rotate: Boolean,
        cross: Boolean,
        gradient: Boolean,
        legend: Boolean,
        rank: Object // 默认为undefined , 参考传值： {direction = 'asc', rankColor = []}
      }       
    </pre>

    <h2>example1 基本使用</h2>
    <textarea readonly style="width: 800px; height: 100px">
      <dv-chart-bar :data="data1" fit ></dv-chart-bar>
      const data1 = ref({
        columns: ['渠道', '访问量'],
        rows: [ ['直接访问', 320], ['邮件营销', 302], ['联盟广告', 334], ['视频广告', 390], ['搜索引擎', 330] ]
      }) 
    </textarea>
     
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart-bar :data="data1" fit ></dv-chart-bar>
    </div>
    <br/>

    <h2>example2 settings使用</h2>
    <h3>
      settings.direction 
    </h3>
    <textarea readonly style="width: 800px; height: 50px">
      <dv-chart-bar :data="data1" fit :settings="{direction: 'y'}"></dv-chart-bar> 
    </textarea>
     
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart-bar :data="data1" fit :settings="{direction: 'y'}"></dv-chart-bar>
    </div> 
    <br/>

    <h3>
      多数据
    </h3>
    <textarea readonly style="width: 800px; height: 220px">
      <dv-chart-bar :data="data2" fit  ></dv-chart-bar> 
      <dv-chart-bar :data="data2" fit :settings="{
        stack: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      }"></dv-chart-bar>
      const data2 = ref({
        columns: ['星期', '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
        rows: [
            ['周一', 320, 302, 301, 334, 390, 330, 320],
            ['周二', 120, 132, 101, 134, 90, 230, 210],
            ['周三', 220, 182, 191, 234, 290, 330, 310],
            ['周四', 150, 212, 201, 154, 190, 330, 410],
            ['周五', 320, 132, 401, 334, 290, 330, 320]
        ]  
      })
    </textarea>
     
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart-bar :data="data2" fit  ></dv-chart-bar>
    </div> 
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart-bar :data="data2" fit :settings="{stack: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']}"></dv-chart-bar>
    </div> 
    <br/>

    <h3>
      settings.lines 柱线结合
    </h3>
    <textarea readonly style="width: 800px; height: 120px">
      <dv-chart-bar :data="data3" fit  theme="dark" :settings="{lines: ['登录量'], smooth: 0}"></dv-chart-bar>
      const data3 = ref({
        columns: ['渠道', '访问量', '登录量'],
        rows: [ ['直接访问', 320, 280], ['邮件营销', 302, 230], 
                ['联盟广告', 334, 320], ['视频广告', 390, 250], ['搜索引擎', 330, 290] 
              ]
      })  
    </textarea>
     
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart-bar :data="data3" fit  theme="dark" :settings="{lines: ['登录量'], smooth: 0}"></dv-chart-bar>
    </div>
    <br/>

    <h3>
      settings.rank 排序
    </h3>
    <textarea readonly style="width: 800px; height: 120px">
      <dv-chart-bar :data="data1" fit :settings="{
        direction: 'y', 
        rank: { 
          direction: 'asc',
          rankColor: ['red', 'orange', 'yellow', 'green', 'skyblue']
        }
      }"></dv-chart-bar>
    </textarea>
     
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart-bar :data="data1" fit :settings="{
        direction: 'y', 
        rank: { 
          direction: 'asc',
          rankColor: ['red', 'orange', 'yellow', 'green', 'skyblue']
        }
      }"></dv-chart-bar>
    </div>
    <br/>

   

    <h2>
      结合dv-page  (settings="{gradient: true}")
    </h2>
    <div style="width: 1000px;  ">
      <demo-warp>
        <dv-page target="parent" fit>
          <dv-box x-align="center" y-align="middle" width="80%" height="80%"  >
            <dv-chart-bar :data="data1" fit :settings="{gradient: true}"></dv-chart-bar>
          </dv-box>
        </dv-page>
      </demo-warp>
    </div> 
    <br/><br/>
    <h2>更多个性化配置</h2>
    <p>参考 图表组件 extend配置的用法， <router-link to="/example/extend-use">extend 配置使用</router-link></p>
    <br/><br/>
  </div>

</template>
<script setup lang="ts" >
import {DvPage, DvBox, DvChartBar} from '$comp/index';
import {ref} from 'vue' 
const data1 = ref({
  columns: ['渠道', '访问量'],
  rows: [
      ['直接访问', 320],
      ['邮件营销', 302],
      ['联盟广告', 334],
      ['视频广告', 390],
      ['搜索引擎', 330]
  ]
}) 

const data2 = ref({
  columns: ['星期', '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
  rows: [
      ['周一', 320, 302, 301, 334, 390, 330, 320],
      ['周二', 120, 132, 101, 134, 90, 230, 210],
      ['周三', 220, 182, 191, 234, 290, 330, 310],
      ['周四', 150, 212, 201, 154, 190, 330, 410],
      ['周五', 320, 132, 401, 334, 290, 330, 320]
  ]  
})

const data3 = ref({
  columns: ['渠道', '访问量', '登录量'],
  rows: [
      ['直接访问', 320, 280],
      ['邮件营销', 302, 230],
      ['联盟广告', 334, 320],
      ['视频广告', 390, 250],
      ['搜索引擎', 330, 290]
  ]
}) 
// import demoWarp from '@/components/demo-warp.vue';
</script>
<style lang="scss" scoped>
 .page-layout{
  height: 100%;
  
 }
</style>